<script setup lang="ts">
import arrow from "@/static/images/arrow.png";
import { useToast } from "wot-design-uni";

const toast = useToast();

const props = defineProps<{
	value;
	placeholder?: string;
	columns;
	disabled?: boolean;
	delay?: boolean;
}>();
const emits = defineEmits(["update:value", "open"]);

const openPicker = () => {
	const TIME = props.delay ? 500 : 0;

	props.delay && toast.loading({ msg: "加载中" });

	emits("open", true);
	setTimeout(() => {
		visible.value = !props.disabled;
		props.delay && toast.close();
	}, TIME);
};
const closePicker = () => {
	const TIME = props.delay ? 500 : 0;

	props.delay && toast.loading({ msg: "加载中" });

	visible.value = false;
	setTimeout(() => {
		emits("open", false);
		props.delay && toast.close();
	}, TIME);
};

const visible = ref(false);
const selected = ref();

const resState = reactive({
	value: null,
	label: null,
});

const handlePickerClick = () => {
	openPicker();
};

const cancel = () => {
	closePicker();
};

const confirm = () => {
	console.log(selected.value);
	resState.value = selected.value;
	setTimeout(() => {
		resState.label = props.columns?.find(
			(e) => e.value === selected.value,
		)?.label;
	}, 0);

	emits("update:value", resState.value);
	closePicker();
};

watch(
	() => props.columns,
	(val) => {
		if (val && val.length > 0) {
			selected.value = val[0]?.value;
		}
	},
	{ immediate: true },
);

watch(
	() => props.value,
	(val) => {
		resState.value = val;
	},
	{ immediate: true },
);
</script>

<template>
	<view
		:class="`picker-wrapper ${props.disabled && 'picker-wrapper_disabled'}`"
	>
		<div class="picker-content" @click="handlePickerClick">
			<template v-if="resState.value">
				<view class="text">{{ resState.label }}</view>
			</template>
			<template v-else>
				<div class="placeholder">{{ props.placeholder ?? "请选择" }}</div>
			</template>

			<view class="arrow-icon">
				<wd-img :src="arrow" class="img" />
			</view>
		</div>
	</view>

	<wd-popup
		v-model="visible"
		position="bottom"
		:safe-area-inset-bottom="true"
		@close="closePicker"
		@click-modal="closePicker"
	>
		<view class="header flex items-center justify-between">
			<view @click="cancel" class="btn b">取消</view>
			<view @click="confirm" class="btn c">确认</view>
		</view>
		<wd-picker-view v-model="selected" :columns="props.columns" />
	</wd-popup>

	<wd-toast></wd-toast>
</template>

<style lang="less" scoped>
.picker-wrapper {
	border-bottom: 1px solid rgba(0, 0, 0, 0.25);
	padding: 10px;
	padding-left: 20px;

	.picker-content {
		position: relative;

		.arrow-icon {
			display: flex;
			align-items: center;
			width: 30px;
			height: 30px;
			position: absolute;
			top: 50%;
			right: 20px;
			transform: translateY(-50%);

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.text,
		.placeholder {
			font-size: 40px;
		}

		.placeholder {
			color: rgba(0, 0, 0, 0.45);
		}
	}
}

.picker-wrapper_disabled {
	background-color: rgba(0, 0, 0, 0.15);
	cursor: not-allowed;
}

.header {
	padding: 20px 30px;
	font-size: 38px;

	.b {
		color: rgb(102, 102, 102);
	}

	.c {
		color: rgb(77, 128, 240);
	}
}
</style>
